<template>
	<view >
		<u-navbar title="新建分类" :safeAreaInsetTop="true" :autoBack="true">
			<view class="u-nav-slot" slot="right">
				<button v-if="val" class="submit" @click="accomplish">完成</button>
				<button v-else class="un_submit">完成</button>
			</view>
		</u-navbar>
		<view :style="{paddingTop:customBar+'px'}"></view>
		
		<view class="input-box">
			<input type="text" v-model="val" placeholder="填写分类名称" placeholder-class="p-c">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customBar: 0,
				val: '',
				shop_id: '',
			}
		},
		onLoad(e) {
			this.getSystemInfo();
		},
		onShow() {
			this.shop_id = uni.getStorageSync('shopId')
		},
		methods: {
			getSystemInfo() {
				uni.getSystemInfo({
					success: (e) => {
						this.customBar = e.statusBarHeight + 44;
					}
				})
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			checkType(v,i) {
				this.typeIndex = i;
				this.type = v.type;
				this.show = false;
			},
			async accomplish() {
				let res = await this.$api.post('staff/course/class/create',{
					shop_id: this.shop_id,
					name: this.val
				});
				if(res.code == 200) {
					uni.showToast({
						title: res.data
					});
					setTimeout(v => {
						uni.navigateBack();
					},2500);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit,.un_submit{
		margin: 0;
		padding: 0;
		width: 93rpx;
		height: 47rpx;
		background: #F17816;
		border-radius: 6rpx;
		font-size: 24rpx;
		color: #FFF;
		text-align: center;
		line-height: 47rpx;
		
	}
	.un_submit::after {
		border: none;
	}
	.un_submit {
		background: #F5F5F5;
		color: #B3B3B3;
	}
	.input-box {
		padding: 32rpx 40rpx;
		background-color: #FFF;
		margin-top: 20rpx;
		input {
			font-size: 27rpx;
		}
	}
</style>